<template>
  <router-layout>
    <div class="container detail">
      <!-- 发表评论组件 -->
      <Container v-if="hidden" @initList="initList" @isconceal="isComBox=false;isShow=false"></Container>
      <div class="wapper-box">
        <div class="deatail-content van-hairline--top">
          <!-- 头部标题 -->
          <div class="title-box">
            <h2 class="title-top">
              <span class="hot-text" v-if="datainfo.top_status==1">
                <van-tag type="primary">置顶</van-tag>
              </span>
              <span>{{ datainfo.article_title }}</span>
            </h2>
            <div class="title-read van-hairline--bottom">
              <van-row type="flex" justify="space-between">
                <van-col>
                  <span class="title-user">{{ datainfo.create_username }}</span>
                  <span>{{ datainfo.create_time }}</span>
                </van-col>
              </van-row>
            </div>
          </div>
          <!-- 内容区域 -->
          <div class="rich_text">
            <div class="content-box ude-box" v-html="datainfo.article_content || '暂无内容...'"></div>
          </div>
          <div class="enclosure-box" v-if="datainfo.file_url">
            <div class="file-box" v-for="(item, index) in datainfo.file_url" :key="index">
              <van-icon class="description" name="description"/>
              <a :href="urlHead+'/'+ item.response.data.file_path" :download="item.name">{{item.name}}</a>
            </div>
          </div>
          <!-- 评论区域 -->
          <div class="comment-big">
            <div class="comment-header van-hairline--bottom">
              <van-row type="flex" justify="space-between" align="center">
                <van-col>
                  <p>全部评论</p>
                </van-col>
                <van-col>
                  <span v-if="!isHot" @click="hotClick">
                    热度
                    <van-icon class="iconfont icon-paixu"/>
                  </span>
                  <span v-if="isHot" style="color:#01A0EF">
                    热度
                    <van-icon class="iconfont icon-paixu"/>
                  </span>
                  <span>|</span>
                  <span v-if="!isTime" @click="timeClick">
                    时间
                    <van-icon class="iconfont icon-paixu"/>
                  </span>
                  <span v-if="isTime" style="color:#01A0EF">
                    时间
                    <van-icon class="iconfont icon-paixu"/>
                  </span>
                </van-col>
              </van-row>
            </div>
            <!-- 评论组件 -->
            <Comment v-if="flag" :datainfo="datainfo" @initList="initList" :dataList="dataList" :depth="0"></Comment>
          </div>
        </div>
      </div>
      <!-- 发布评论 -->
      <div v-if="datainfo.comment_status==0?isShow:!isShow" class="reply-box van-hairline--top">
        <van-row type="flex" justify="space-between" align="center">
          <van-col :span="12">
            <van-cell-group class="reply-left van-hairline--surround">
              <div @click="reply_article">
                <van-field @blur="out" disabled placeholder="说点什么呢..."/>
              </div>
            </van-cell-group>
          </van-col>
          <van-col :span="12">
            <i class="comment-num">
              <i v-if="datainfo.iscollect==0" class="iconfont icon-shoucang" @click="collection(1)"></i>
              <i
                v-if="datainfo.iscollect==1"
                style="color:red"
                class="iconfont icon-shoucang"
                @click="collection(0)"
              ></i>
              <span>{{ datainfo.collect_nums || 0}}</span>
            </i>
            <i class="comment-num">
              <i v-if="datainfo.islike==0" class="iconfont icon-dianzan1" @click="give_abulous"></i>
              <i v-if="datainfo.islike==1" style="color:#01A0EF" class="iconfont icon-dianzan1"></i>
              <span>{{ datainfo.like_nums || 0}}</span>
            </i>
            <i class="comment-num">
              <i class="iconfont icon-xiaoxi" @click="reply_article"></i>
              <span>{{ dataList.length || 0}}</span>
            </i>
          </van-col>
        </van-row>
      </div>
      <!-- 审核状态组件 -->
      <AuditStatus :datainfo="datainfo"></AuditStatus>
    </div>
  </router-layout>
</template>

<script>
import Backtop from "../public/backtop/Backtop"; //导入回到顶部
import Comment from "../public/comment/Comment"; // 导入评论组件
import Container from "../public/commentContainer/container"; // 导入发表评论组件
import AuditStatus from "../public/state/auditStatus"; // 导入审核状态组件
import TitleItem from "../../components/public/title/title";
import {
  article_findById,
  article_addReadNum,
  article_addLikeNum,
  article_addCollectNum,
  article_decCollectNum,
  article_addBrowseNum
} from "@/api/article";
import {
  articleComment_save,
  articleComment_getTree
} from "@/api/articleComment";
import { clacTime } from "@/utils";
import other from "@/utils/other";
import { mapGetters } from "vuex";

export default {
  name: "CommunityDetail",
  components: { Backtop, Comment, AuditStatus, Container, TitleItem },
  data() {
    return {
      flag: false,
      isNoData: false,
      isShow: false, //控制回复评论模块
      isComBox: false, //控制回复内容的显示隐藏
      isHot: false, //控制热度筛选排行
      isTime: false, //控制时间筛选排行
      urlHead: localStorage.getItem("oss_public_url"),
      datainfo: {},
      treeDataList: [],
      listQuery: {},
      treeList: {
        order_by: "",
        company_id: localStorage.getItem("companyId") - 0
      },
      dataList: []
    };
  },
  computed: {
    ...mapGetters(["hidden", "commenInfo"])
  },
  methods: {
    out() {
      other.inputBlur();
    },
    //点击评论按热度排序
    hotClick() {
      this.isHot = true;
      this.isTime = false;
      this.treeList.order_by = "like";
      this.get_treeList();
    },
    //点击评论按时间排序
    timeClick() {
      this.isHot = false;
      this.isTime = true;
      this.treeList.order_by = "time";
      this.get_treeList();
    },
    //收藏贴子
    collection(e) {
      if (e == 1) {
        this.oneCollectNum();
      }
      if (e == 0) {
        this.$dialog
          .confirm({
            message: "您确定要取消收藏吗?"
          })
          .then(() => {
            this.oneDelCollectNum();
          })
          .catch(() => {});
      }
    },
    //点赞
    give_abulous() {
      this.oneAbulous();
    },
    //一次阅读
    async oneBrowse() {
      let query = Object.assign(
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await article_addReadNum(query);
      let result = res.data;
      if (result.status == 100) {
      } else {
        // alert("111111");
      }
    },
     //一次浏览
    async oneList() {
      let query = Object.assign(
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await article_addBrowseNum(query);
      let result = res.data;
      if (result.status == 100) {
        
      }
    },
    //一次点赞
    async oneAbulous() {
      let query = Object.assign(
        { islike: 1 },
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await article_addLikeNum(query);
      let result = res.data;
      if (result.status == 100) {
        this.$toast.success("点赞成功");
        this.initList();
      }
    },
    //收藏
    async oneCollectNum() {
      let query = Object.assign(
        { iscollect: 1 },
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await article_addCollectNum(query);
      let result = res.data;
      if (result.status == 100) {
        this.$toast.success("收藏成功");
        this.initList();
      }
    },
    //取消收藏
    async oneDelCollectNum() {
      let query = Object.assign(
        { iscollect: 0 },
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await article_decCollectNum(query);
      let result = res.data;
      if (result.status == 100) {
        this.$toast.success("取消收藏成功");
        this.initList();
      }
    },
    //回复文章
    reply_article() {
      this.$store.dispatch("SetHidden", true);
      this.isShow = true;
      let replyinfo = {
        parent_id: 0,
        article_id: this.$route.query.id,
        comment_content: "",
        like_nums: 0,
        company_id: localStorage.getItem("companyId") - 0
      };
      this.$store.dispatch("SetCommenInfo", replyinfo);
    },
    //获取数据
    async initList() {
      let query = Object.assign(
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await article_findById(query);
      let result = res.data;
      if (result.status == 100) {
        this.flag = true;
        this.datainfo = result.data;
        if (result.data.file_url) {
          this.datainfo.file_url = JSON.parse(result.data.file_url)
        }
        this.dataList = result.data.articleComments;
        if (!this.dataList.length) {
          this.isNoData = true;
        }
        if (this.datainfo.article_content.indexOf("710") > -1) {
          this.datainfo.article_content = this.datainfo.article_content.replace(
            "710",
            "100%"
          );
        }
        this.datainfo.create_time = clacTime(this.datainfo.create_time);
      }
    },
    //获取树结构数据
    async get_treeList() {
      let query = Object.assign(
        { article_id: this.$route.query.id },
        this.treeList
      );
      let res = await articleComment_getTree(query);
      let result = res.data;
      if (result.status == 100) {
        this.flag = true;
        this.dataList = result.data;
      }
    }
  },
  created() {
    this.initList();
    this.oneList();
    // this.get_treeList();
  },
  mounted() {
    this.$nextTick(() => {
      //监控页面滚动到底部
      const el = document.querySelector(".container");
      const offsetHeight = el.offsetHeight;
      el.onscroll = () => {
        const scrollTop = el.scrollTop;
        const scrollHeight = el.scrollHeight;
        if (offsetHeight + scrollTop - scrollHeight >= -1) {
          //   alert(11);
          this.oneBrowse();
        }
      };
    });
  }
};
</script>
<style>
.content-img img {
  max-width: 100%;
}
</style>

<style lang="scss" scoped>
@import "CommunityDetail";
  .file-box {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    padding-left: 10px;
    font-size: 14px;
    .description {
      padding-right: 6px;
    }
  }
</style>
